<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title>仿有道词典</title>
<link href="css/mui.css" rel="stylesheet"/>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
</head>
<body>
<div class="mui-content">
    <div class="fanyiBox">
    	<textarea id="keywords" placeholder="请输入要翻译的文本..."></textarea>
    </div>
    <div class="btnBox">
    	<button type="button" id="submitBtn" class="mui-btn">开始翻译</button>
    </div>
    <div class="showBox" id="resShow">
    	
    </div>
</div>

<script src="js/mui.min.js"></script>
<script src="js/h.js" ></script>
<script type="text/javascript" charset="utf-8">
mui.init();
var _index, _self, _next, _prev;
mui.plusReady(function(){
    _self = plus.webview.currentWebview();
    _prev = plus.webview.getWebviewById('sub1.html');
    _next = plus.webview.getWebviewById('sub3.html');
    _index = plus.webview.getLaunchWebview();
    _self.drag(
        {
            direction : "right",
            moveMode  :　"followFinger"
        },
        {
            view　              :　_prev,
            moveMode  : "follow"
        },
        function(e){
            if(e.type == 'end' && e.result){
				_index.evalJS("h('#tabBar').find('a').removeClass('mui-active'); h('#nav1').addClass('mui-active');");
			}
        }
    );
    _self.drag(
        {
            direction : "left",
            moveMode  :　"followFinger"
        },
        {
            view　              :　_next,
            moveMode  : "follow"
        },
        function(e){
            if(e.type == 'end' && e.result){
				_index.evalJS("h('#tabBar').find('a').removeClass('mui-active'); h('#nav3').addClass('mui-active');");
			}
		}
    );
});
h("#submitBtn").tap(function(){
	var keywords = h("#keywords").val();
	if(keywords.length < 1){mui.toast("请输入要翻译的文本！");return false;}
	mui.getJSON(
		'http://fanyi.youdao.com/openapi.do?keyfrom=mytest007&key=439890631&type=data&doctype=json&version=1.1&q='+keywords,//有道翻译api接口
		function(data){
			console.log(JSON.stringify(data));
			h('#resShow').html('翻译结果 : <br />'+
                data.translation+'<br />'
            );
		}
	)
	
})	
</script>
</body>
</html>